<template>
  <div flex h-full>
    login
    <!-- <div
      m-auto
      bg-gray-100
      w-350
      flex
      flex-col
      items-center
      border
      border-gray-300
      p-30
      rounded-10
    >
      <h5 text-24 font-normal color="#6a6a6a">
        {{ title }}
      </h5>
      <div mt-30 w-full>
        <n-input
          v-model:value="loginInfo.name"
          autofocus
          class="text-16 items-center h-50 pl-10"
          placeholder="admin"
          :maxlength="20"
        >
        </n-input>
      </div>
      <div mt-30 w-full>
        <n-input
          v-model:value="loginInfo.password"
          class="text-16 items-center h-50 pl-10"
          type="password"
          show-password-on="mousedown"
          placeholder="123456"
          :maxlength="20"
          @keydown.enter="handleLogin"
        />
      </div>

      <div mt-20 w-full>
        <n-checkbox
          :checked="isRemember"
          label="记住我"
          :on-update:checked="(val) => (isRemember = val)"
        />
      </div>

      <div mt-20 w-full>
        <n-button
          w-full
          h-50
          rounded-5
          text-16
          type="primary"
          @click="handleLogin"
          >登录</n-button
        >
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { login } from "@/api/auth";
import { lStorage, setToken } from "@/utils";
import { ref } from "vue";
import { useRouter } from "vue-router";

const title = import.meta.env.VITE_APP_TITLE;

const router = useRouter();

const loginInfo = ref({
  name: "",
  password: "",
});

initLoginInfo();

function initLoginInfo() {
  const localLoginInfo = lStorage.get("loginInfo");
  if (localLoginInfo) {
    loginInfo.value.name = localLoginInfo.name || "";
    loginInfo.value.password = localLoginInfo.password || "";
  }
}

const isRemember = ref(false);
async function handleLogin() {
  const { name, password } = loginInfo.value;
  if (!name || !password) {
    $message.warning("请输入用户名和密码");
    return;
  }
  try {
    const res = await login({ name, password: password.toString() });
    if (res.code === 0) {
      $message.success("登录成功");
      setToken(res.data.token);
      if (isRemember.value) {
        lStorage.set("loginInfo", { name, password });
      } else {
        lStorage.remove("loginInfo");
      }
      router.push("/");
    } else {
      $message.warning(res.message);
    }
  } catch (error) {
    $message.error(error.message);
  }
}
</script>
